<template>
  <el-select :ref="refs" v-model="value" :placeholder="`请选择${title}`" :popper-append-to-body="false">
    <el-option disabled value="">
      <div class="title">
        <span>{{ title }}选择 </span>
        <i class="el-icon-close close" @click="close"></i>
      </div>
      <div class="tree-list">
        <el-tree :data="getTree" :props="defaultProps" @node-click="handleNodeClick"
          :default-expand-all="defaultExpandAll" :defaultProps="defaultProps">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <div class="custom-node">
              <img src="../../../assets/img/wjj.png" alt="" class="node-icon" v-if="!node.isLeaf">
              <el-checkbox v-model="data.checked" class="node-checked" v-else></el-checkbox>
              <span :class="data.checked ? 'node-active' : ''">{{ node.label }}</span>
              <div class="mask"></div>
            </div>
          </div>
        </el-tree>
      </div>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "TreeSelect",
  props: {
    refs: {
      type: String,
      default: "tree_select"
    },
    value: {
      // type: [String, Array],
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    tree: {
      type: Array,
      default: () => []
    },
    defaultExpandAll: {
      type: Boolean,
      default: true
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label"
        };
      }
    }
  },
  computed: {
    getTree: {
      get() {
        const deep_tree = JSON.parse(JSON.stringify(this.tree));
        const tree = this.handleTreeData(deep_tree, this.value);
        return tree;
      },
      set(val) {
        return val;
      }
    }
  },
  data() {
    return {
    };
  },
  methods: {
    handleTreeData(tree, defaultVal) {
      tree.forEach(item => {
        if (!item.children) {
          item.checked = (defaultVal && item.label == defaultVal);
        } else {
          item.children = this.handleTreeData(item.children, defaultVal);
        }
      });
      return tree;
    },
    handleNodeClick(data, node) {
      this.$emit("getTreeData", data);
      // 点击父级不处理
      if (!data.children && !data.checked) {
        // 单选处理
        this.getTree = this.handleTreeData(this.getTree);
        data.checked = true;
        this.$emit("input", data.label);
        this.$emit("select", data);
        this.close();
      }
    },
    close() {
      this.$refs.tree_select.blur();
    }
  }
};
</script>

<style lang='less' scoped>
:deep(.el-select-dropdown__wrap) {
  max-height: none;
}

:deep(.el-select-dropdown__list) {
  padding: 1px 0;
}

:deep(.el-select-dropdown__item) {
  height: 300px;
  padding: 0;

  &.is-disabled {
    cursor: default;
  }

  &.selected {
    font-weight: normal;
  }
}

:deep(.el-select-dropdown__item.hover) {
  background-color: transparent;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  background-color: #5b7df5;
  color: #fff;
  padding: 0 10px;
  font-weight: 700;

  .close {
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
  }
}

.tree-list {
  // max-height: 300px;
  height: 270px;
  overflow-y: auto;
}

.custom-node {
  position: relative;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

.node-icon {
  width: 10px;
  margin-right: 7px;
}

.node-checked {
  margin-right: 5px;

  // :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
  //   border-color: #5B7DF5;
  // }
  :deep(.el-checkbox__inner:hover) {
    border-color: #5b7df5;
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #fff;
    border-color: #5b7df5;

    &::after {
      border-color: #5b7df5;
    }
  }
}

.node-active {
  text-decoration: underline;
  color: #5b7df5;
}
</style>
